<template>
	<view class="">
		<view class="cell">
			<view class="time padding" @click="show = true">
				<view class="">预订时间</view>
				<view class="right">
					<text style="margin-right: 10rpx;">{{selectDate}}</text>
					<u-icon name="arrow-right" size="24rpx" color="rgb(144, 147, 153)"></u-icon>
				</view>
			</view>
		</view>


		<view class="" v-for="(item, index) in list" :key="index">
			<view class="cell">
				<view class="padding">
					<u-cell :border="true">
						<view class="u-cell-title" slot="title">
							<text>{{item.productName}}</text>
							<text style="color: #FD8F19;margin-left: 20rpx;font-size: 26rpx;"
								@click="handleReading(item)">购票须知</text>
						</view>
						<view class="app-pirce-color" slot="label">
							<text style="font-size: 24rpx;">￥</text>
							<text>{{item.productPrice }}</text>
						</view>
						<view class="submit" slot="value" @click="submit(item)">预订</view>
					</u-cell>
				</view>
			</view>
		</view>
		<!-- 日历 -->
		<u-calendar :show="show" mode="single" showLunar color="#f74062" @confirm="confirm" @close="cencel"
			title="请选择日期" :isShowTop="false"></u-calendar>
		<!-- 须知 -->
		<notice-vote ref="notice-vote"></notice-vote>

		<!-- empowerShow -->
		<empower @login-success="empowerSuccess" @cancel="empowerShow=false" v-if="empowerShow"></empower>
	</view>
</template>
<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	let date = d.getDate();
	date = date < 10 ? `0${date}` : date;
	import noticeVote from './noticeVote.vue';
	import empower from "@/components/empower";
	import {
		realmName,
		header
	} from "@/http";
	import {
		dateFormat
	} from "@/utils/pay.js";
	export default {
		components: {
			noticeVote,
			empower
		},
		data() {
			return {
				show: false,
				state: 1,
				state: 2,
				list: [],
				selectDate: `${year}-${month}-${date}`,
				pageNum: '',
				pageSize: '',
				proDate: '',
				empowerShow: false,
			}
		},
		methods: {
			handleReading(options) { //须知
				this.$nextTick(() => {
					this.$refs['notice-vote'].init(options)
				});
			},
			empowerSuccess() {
				this.empowerShow = false;
			},
			confirm(options) {
				this.selectDate = options[0];
				this.moeslist(this.selectDate);
				this.show = false;
			},
			cencel(options) {
				this.show = false
			},
			async submit(options) {
				let userInfo = uni.getStorageSync('userInfo') || {};
				if (!userInfo || !userInfo.phone) return this.empowerShow = true;

				uni.navigateTo({
					url: `/homePages/scenicSpot/reserve?data=${JSON.stringify(options)}&date=${this.selectDate}`
				});
			},
			handleTabs(state) {
				this.state = state;
			},
			moeslist(proDate) { //列表
				this.$http.getuselist({
					pageNum: 1,
					pageSize: 99,
					proDate,
				}).then(res => {
					this.list = res.data.rows;
				});
			}

		},
		async mounted() {
			await uni.request({
				method: "POST",
				url: `${realmName}/clota/GetProducts?date=${dateFormat('YYYY-mm-dd',new Date())}`,
				header: {
					'Authorization': uni.getStorageSync('Authorization')
				}
			});
			this.moeslist(`${year}-${month}-${date}`)
		}
	}
</script>
<style lang="scss" scoped>
	::v-deep .u-cell {
		&+.u-cell {
			.u-line {
				opacity: 0;
			}
		}
	}

	.cell {
		margin-top: 30rpx;
		box-shadow: 0 0 4rpx #ccc;

		.app-pirce-color {
			padding-top: 30rpx;
			font-size: 30rpx;
			color: #D9001B;
		}

		.time {
			display: flex;
			justify-content: space-between;

			.right {
				display: flex;
				align-items: center;
			}
		}

		.submit {
			padding: 15rpx 35rpx;
			border-radius: 8rpx;
			color: #FFFFFF;
			background-color: #D9001B;
		}

		.padding {
			padding: 20rpx 30rpx 20rpx 30rpx;
		}

		.title {
			padding-bottom: 30rpx;
			padding-top: 40rpx;
			display: flex;
			justify-content: space-between;
		}
	}
</style>
